<template>
    <view class="waiter-list-container">
        <!-- 顶部标题 -->
        <!-- <view class="nav-bar">服务人员列表</view> -->
        <u-sticky bgColor="#fff">
            <view class="p_20">
                <u-search placeholder="请输入打手名字" :clearabled="true" :showAction="false"
                          v-model="queryObj.nickName" @search="updateData" @clear="updateData"></u-search>
            </view>
            <view class="dis_f_c_c m_b_10">
                <u-tabs :list="typeList" keyName="configName" @change="handleTabChange"></u-tabs>
            </view>
        </u-sticky>
        <!-- 可滚动区域 -->
        <!-- 人员列表 -->
        <view v-for="(waiter, index) in list" :key="index" class="waiter-card" @click="navigateToDetail(waiter.userId)">
            <!-- 左侧头像区域 -->
            <view class="dis_f_l_c">
                <view class="avatar-container">
                    <!-- <image class="avatar" :src="waiter.avatar" mode="aspectFill" lazy-load /> -->
                    <u-avatar size="60" :src="waiter.avatar" shape="square"></u-avatar>
                    <!-- <icon v-if="waiter.isOnline" type="success" size="16" color="#07C160" class="online-icon" /> -->
                </view>

                <!-- 中间信息区域 -->
                <view class="info-container">
                    <view class="dis_f_l_c">
                        <view class="name m_r_5">{{ waiter.nickName }}</view>
                        <u-tag v-if="waiter.dsVipName" :text="waiter.dsVipName" size="mini" type="info" plain
                               plainFill></u-tag>
                    </view>
                    <!--                    <text class="title">{{ waiter.gameName || "" }}</text>-->
                    <text class="rate">{{ waiter.gameName || "" }} {{ waiter.gameName&& waiter.allOrder ? '|' : '' }} 已服务订单:{{ waiter.allOrder }}</text>
                    <text class="title">{{ waiter.info || "" }}</text>
                </view>
            </view>
            <view class="dis_f_r_c">
                <!-- 右侧按钮区域 -->
                <button class="book-btn" @click.stop="handleBook(waiter.userId)">
                    指定
                </button>
                <button class="ds-btn" @click.stop="handleReward(waiter)" v-if="isUp">
                    打赏
                </button>
            </view>
        </view>
        <view class="m_t_100" v-if="list.length==0">
            <s-empty/>
        </view>
        <u-modal :show="showGive" title="打赏" :showCancelButton="true" @confirm="handleConfirmGive"
                 @cancel="showGive = false">
            <u--form labelPosition="left" :model="giveForm">
                <u-form-item label="金额" prop="amount" ref="item1">
                    <u--input v-model="giveForm.amount" placeholder="请输入金额"></u--input>
                </u-form-item>
                <u-form-item label="支付方式">
                    <u-radio-group v-model="payType" placement="row">
                        <u-radio :customStyle="{marginRight: '8px'}" label="微信" name="1"></u-radio>
                        <u-radio :customStyle="{marginRight: '8px'}" label="余额" name="2"></u-radio>
                    </u-radio-group>
                </u-form-item>
            </u--form>
        </u-modal>
    </view>
</template>

<script>
import {getByKeyApi, getGoodsListApi, getUserListApi, vipGiveApi} from "@/sheep/api/index.js";
import {myMixins} from "@/mixins/myMixins";
import {xcxTopUp} from "@/sheep/utils/wxUtil";

export default {
    mixins: [myMixins],
    data() {
        return {
            payType: '1',
            list: [],
            queryObj: {
                isWaiter: "1",
                status: "0",
                nickName: '',
            },
            typeList: [],
            activeIndex: 0,
            userId: '',
            showGive: false,
            giveForm: {
                amount: ''
            },
            isUp: true,
        };
    },
    onLoad() {
        this.getTypeList();
        this.getIsUp();
    },
    methods: {
        async getTypeList() {
            let res = await getByKeyApi("goods_type");
            this.typeList = res.data;
            this.updateData();
        },
        async getIsUp() {
            let res = await getByKeyApi("is_up");
            this.isUp = res.data[0]?.configValue == 1;
        },
        handleTabChange(e) {
            this.activeIndex = e.index
            this.updateData();
        },
        getList() {
            this.queryObj.typeIds = this.typeList[this.activeIndex].businessConfigId;
            getUserListApi(this.queryObj).then((res) => {
                this.list = this.list.concat(res.rows);
                this.total = res.total;
                if (this.queryObj.pageNum * this.queryObj.pageSize < this.total) {
                    this.status = "loadmore";
                } else {
                    this.status = "nomore";
                }
                uni.stopPullDownRefresh();
            });
        },
        // 跳转到详情页
        navigateToDetail(userId) {
            uni.navigateTo({
                url: "/pages/userHome/index?userId=" + userId,
            });
        },
        // 指定处理
        handleBook(userId) {
            uni.navigateTo({
                url: "/pages/userHome/index?userId=" + userId,
            });
        },
        handleReward(item) {
            this.userId = item.userId
            this.showGive = true
        },
        handleConfirmGive() {
            if (!this.giveForm.amount) {
                uni.showToast({
                    title: "请输入金额",
                    icon: "none",
                });
                return
            }
            if (this.payType == 1) {
                let that = this
                xcxTopUp(this.giveForm.amount, this.userId, 'ds', '打赏').then(res => {
                    if (res) {
                        uni.showToast({
                            title: '打赏成功',
                            icon: "none",
                        });
                        that.updateData()
                        that.showGive = false
                    }
                })
            }
            if (this.payType == 2) {
                vipGiveApi({amount: this.giveForm.amount, userId: this.userId, type: 1}).then(res => {
                    uni.showToast({
                        title: res.msg,
                        icon: "none",
                    });
                    if (res.code == 200) {
                        this.updateData()
                        this.showGive = false
                    }
                })
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.waiter-list-container {
    background-color: #f7f7f7;
    min-height: 100vh;

    .nav-bar {
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        font-size: 32rpx;
        font-weight: 500;
        background-color: #ffffff;
        color: #000000;
    }

    .scroll-view {
        height: calc(100vh - 88rpx);
        padding: 20rpx;
    }

    .waiter-card {
        //display: flex;
        //align-items: center;
        padding: 20rpx;
        // margin-bottom: 20rpx;
        background-color: #ffffff;
        border-radius: 12rpx;
        border: 1rpx solid #eeeeee;

        .avatar-container {
            position: relative;
            margin-right: 20rpx;

            .avatar {
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;
            }

            .online-icon {
                position: absolute;
                right: 0;
                bottom: 0;
            }
        }

        .info-container {
            flex: 1;
            display: flex;
            flex-direction: column;

            .name {
                font-size: 32rpx;
                font-weight: bold;
                margin-bottom: 8rpx;
            }

            .title {
                font-size: 26rpx;
                color: #666666;
                margin-bottom: 8rpx;
            }
        }

    }
}

.rate {
    font-size: 24rpx;
    color: #ff9900;
}

.book-btn {
    width: 130rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    color: #ffffff;
    background-color: #716AF8;
    border-radius: 30rpx;
    margin: 0;
    padding: 0;
}

.ds-btn {
    width: 130rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    color: #ffffff;
    background-color: #F6CE4A;
    border-radius: 30rpx;
    margin: 0;
    padding: 0;
    margin-left: 10rpx;
}
</style>
